// var moment = require('moment');
var token_ = localStorage.getItem('mytoken')

function getLocalTime(nS) {
    return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}

function kan() {
    // console.log(token_);
    $.ajax({
        url: `http://192.168.3.184:7001/users`,
        type: "GET",
        headers: {
            token: token_
                // : localStorage.getItem('mytoken')
        },
        success: function(res) {
            console.log(res);
            let size = 5,
                page = Math.ceil(res.data.length / size),
                pageCount = 5;

            //当前选中的页数
            let cur = 1;

            //显示内容列表
            const _content = document.querySelector('#table')
            const showContent = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                <th>用户名</th>
            
                <th>邮箱</th>
                <th>手机号</th>
               
                <th>头像</th>
                <th>注册时间</th>
                <th>操作</th>`
                res.data.forEach((item, index) => {
                    const time = getLocalTime(item.reg_time)
                        //遍历计算方法，当前为第1页，一页2个，以此类推
                        // console.log(item, index);

                    if (index >= (cur - 1) * size && index < cur * size) {
                        const tr = document.createElement('tr');
                        tr.innerHTML = `<td>${item.id}</td>
                        <td>${item.user_name}</td>
                     
                        <td>${item.email}</td>
                        <td>${item.phone}</td>
                        <td><img class='hear' src='http://192.168.3.184:7001/${item.head_portrait}' /></td>
                        <td>${time}</td>
                        <td>
                        <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                        <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                        <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                        </td>`
                        _content.appendChild(tr)
                    }
                })
            }


            //创建分页列表
            const _pagination = document.querySelector('.pagination');
            const createPagination = () => {
                showContent()
                    //拼接左右按钮
                    //当页数不为1为可点击态
                let lis = ` <li class="material-icons page-btn page-btn-prev ${cur!==1?'isclick':''}">
                    <img src="./imges/箭头-左.png" alt=""></li>`;

                if (cur < 1 || cur > page) {
                    throw `cur 参数最小值为1 最大值为${page}`
                } else if (pageCount < 5) {
                    throw `pageCount 参数最小值5`
                } else if (page <= pageCount) {
                    //总页数小于等于按钮数。直接遍历，不需省略号
                    for (let i = 1; i <= page; i++) {
                        lis += ` <li class="page-number ${i==cur?'active':''}">${i}</li>`
                    }
                } else {
                    /// 保存当前分页前后数字按钮
                    let befNum = cur - (pageCount - 3) / 2,
                        aftNum = cur + (pageCount - 3) / 2;

                    //显示左省略按钮
                    if (cur >= pageCount - 1) {
                        lis += `<li class="page-number">1</li>
                            <li class="material-icons page-dot page-dot-prev">...</li>`
                    }

                    //解决显示0页码
                    //af为除去省略号后的一个按钮
                    //同理解决为页数为最大时后面不显示
                    if (cur >= 1 && cur < pageCount - 1) {
                        befNum = 1;
                        aftNum = pageCount - 1;
                    } else if (cur <= page && cur > page - (pageCount - 2)) {
                        aftNum = page
                    }

                    for (let i = befNum; i <= aftNum; i++) {
                        lis += ` <li class="page-number ${i==cur?'active':''}">${i}</li>`
                    }

                }


                //显示右省略按钮
                if (cur <= page - (pageCount - 2)) {
                    lis += ` <li class="material-icons page-dot page-dot-next">...</li>
                    <li class="page-number">${page}</li>`
                }

                //拼接右
                lis += ` <li class="material-icons page-btn page-btn-next ${cur!==page?'isclick':''}"> 
                    <img src="./imges/箭头-右.png" alt=""></li>`;


                _pagination.innerHTML = lis;


                //点击切换
                const _pageNum = document.querySelectorAll('.page-number');
                _pageNum.forEach((item) => {
                    item.addEventListener('click', () => {
                        //item.inne为字符串。转成数字
                        cur = parseInt(item.innerHTML);
                        createPagination();

                    })
                })

                //下一页
                const _pagenext = document.querySelector('.page-btn-next');
                // console.log(_pagenext);
                _pagenext.addEventListener('click', () => {
                    if (cur !== page) {
                        cur++;
                        createPagination();
                    }
                })

                //上一页
                const _pageprev = document.querySelector('.page-btn-prev');
                _pageprev.addEventListener('click', () => {
                    if (cur !== 1) {
                        cur--;
                        createPagination();
                    }
                })


                //前进PC-2格子
                //省略号时隐时现
                var _paDotNext = document.querySelector('.page-dot-next');
                if (_paDotNext) {
                    _paDotNext.addEventListener('click', () => {
                        cur += pageCount - 2;
                        createPagination();
                    })
                }



                //后退PC-2格子
                //省略号时隐时现，所以用？
                var _paDotpre = document.querySelector('.page-dot-prev');
                if (_paDotpre) {
                    _paDotpre.addEventListener('click', () => {
                        cur -= pageCount - 2;
                        createPagination();
                    })
                }

            }
            createPagination();


        }

    })
}

kan()
    // console.log(localStorage.getItem('mytoken'));